<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Collection
              style="width: 1em; height: 1em; vertical-align: middle"
            />
            <span style="vertical-align: middle">缓存列表</span>
            <span
              style="vertical-align: middle; margin-left: 5%"
              v-hasPermi="[
                'ds:agreement:thread:unlock:get',
                'ds:agreement:thread:unlock:save',
              ]"
            >
              开启并发数据流
            </span>
            <el-switch
              v-model="lock"
              @change="lockChangeHandle"
              style="vertical-align: middle"
            />

            <el-button
              style="float: right; padding: 3px 0"
              link
              type="primary"
              icon="Refresh"
              @click="refreshCatchList()"
            ></el-button>
          </template>
          <el-col :span="24" :xs="24">
            <el-form :model="queryParams" :inline="true" @submit.prevent>
              <el-form-item label="">
                <el-input
                  placeholder="请输入serviceCode"
                  clearable
                  v-model="queryParams.serviceCode"
                  style="width: 250px; height: 35px"
                  @change="handleQuery()"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>

          <el-table
            v-loading="loading"
            :data="list"
            :height="tableHeight"
            highlight-current-row
            @row-click="rowTableHandle"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="60"
              type="index"
            ></el-table-column>

            <el-table-column
              label="serviceCode"
              align="center"
              prop="serviceCode"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column
              label="当前状态"
              align="center"
              prop="status"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <el-tag
                  size="large"
                  type="danger"
                  v-if="scope.row.status == 5"
                  style="width: 80%"
                >
                  FAIL
                </el-tag>
                <el-tag
                  size="large"
                  type="success"
                  v-if="scope.row.status == 3"
                  style="width: 80%"
                >
                  查得
                </el-tag>
                <el-tag
                  size="large"
                  type="warning"
                  v-if="scope.row.status == 4"
                  style="width: 80%"
                >
                  未查得
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="60"
              align="center"
              class-name="small-padding fixed-width"
            >
              <!-- <template #default="scope">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleClearCacheName(scope.row)"
                ></el-button>
              </template> -->
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList()"
          />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card style="height: calc(100vh - 125px)">
          <template #header>
            <Key style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">键名列表</span>
            <el-button
              style="float: right; padding: 3px 0"
              link
              type="primary"
              icon="Refresh"
              @click="refreshCacheKeys()"
            ></el-button>
          </template>

          <el-form
            :model="form"
            label-position="right"
            label-width="100px"
            ref="formRef"
            @submit.prevent
            v-if="isShow"
          >
            <el-row :gutter="20">
              <el-col :span="17" :offset="1">
                <el-form-item label="serviceCode：" prop="appNo">
                  <el-input v-model="form.serviceCode" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="17" :offset="1">
                <el-form-item label="响应状态：" prop="status">
                  <el-radio-group v-model="form.status">
                    <el-radio :value="'3'">
                      <el-tag size="large" type="success"> 查得成功 </el-tag>
                    </el-radio>
                    <el-radio :value="'4'">
                      <el-tag size="large" type="warning"> 未查得 </el-tag>
                    </el-radio>
                    <el-radio :value="'5'">
                      <el-tag size="large" type="danger"> 失败 </el-tag>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer v-if="isShow">
            <el-row :gutter="20"
              ><el-col :span="17" :offset="1">
                <div
                  class="dialog-footer"
                  style="
                    display: flex;
                    justify-content: left;
                    margin-bottom: 30px;
                  "
                >
                  <el-button
                    type="primary"
                    @click="save()"
                    v-hasPermi="['ds:agreement:serviceCode:catch']"
                    >确 定</el-button
                  >
                  <el-button @click="close()">取 消</el-button>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { dsAgreementApi } from "@/api/kernel/ds-agreement.js";
import { onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const tableHeight = ref(window.innerHeight - 200);
const loading = ref(true);

const formRef = ref(null);
const list = ref([]);
const form = ref({});
const isShow = ref(false);

const getList = () => {
  dsAgreementApi.getServiceCodeCatchList(queryParams.value).then((res) => {
    loading.value = false;
    list.value = res.rows;
  });
};
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  serviceCode: "",
});
const total = ref(0);

//- 表格行点击事件
const rowTableHandle = (row, event, column) => {
  form.value = Object.assign({}, row);
  isShow.value = true;
};

const refreshCatchList = () => {
  isShow.value = false;
  queryParams.value.serviceCode = "";
  getList();
 
};

onMounted(() => {
  getList();
  getThreadLock();
});
const close = () => {
  isShow.value = false;
  form.value.resetFields();
};
const save = () => {
  dsAgreementApi.saveServiceCode(form.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });
    refreshCatchList();
  });
};

const lock = ref(false);
//- 多线程时开启redis
const lockChangeHandle = () => {
  console.log(lock.value);
  let title = "";
  if (lock.value) {
    title = "确定要开启数据流并发吗？";
  } else {
    title = "确定要关闭数据流并发吗？";
  }
  ElMessageBox.confirm(`${title}`, "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      dsAgreementApi.saveThreadLock({ lock: lock.value }).then((res) => {
        lock.value = res.data;
        console.log(lock.value);
        ElMessage({
          type: "success",
          message: res.msg,
        });
      });
    })
    .catch(() => {
      // ElMessage({
      //   type: "info",
      //   message: "Delete canceled",
      // });
      lock.value = !lock.value;
    });
};
const handleQuery=()=>{
  getList();
}

const getThreadLock = () => {
  dsAgreementApi.getThreadLock().then((res) => {
    lock.value = res.data;
  });
};
</script>
